<template>
  <div class="my-recruitment">
    <el-card style="margin-bottom:20px;">
      <div slot="header" class="clearfix">
        <span>我发布的职位</span>
        <div class="btn-right">
          <el-button type="primary" size="small" @click="update">编辑</el-button>
          <el-button type="primary" size="small" @click="returnPost">返回</el-button>
        </div>
      </div>

      <div class="content">
        <div class="pb20">
          <span class="recruitment-header">职位名称</span>
          <el-tag effect="plain" class="ml10">{{ recruitment.name }}</el-tag>
        </div>
        <div class="pb20">
          <span class="recruitment-header">薪资范围</span>
          <el-tag effect="plain" class="ml10">{{ recruitment.salaryLower }}-{{recruitment.salaryUpper}} k</el-tag>
        </div>
        <div class="pb20">
          <span class="recruitment-header">经验要求</span>
          <el-tag effect="plain" class="ml10">{{ recruitment.experience | dataFilter(experienceOperations) }}</el-tag>
        </div>
        <div class="pb20">
          <span class="recruitment-header">学历要求</span>
          <el-tag effect="plain" class="ml10">{{ recruitment.education | dataFilter(educationOperations) }}</el-tag>
        </div>
        <div class="pb20" v-if="recruitment.welfare">
          <span class="recruitment-header">职位福利</span>
          <el-tag effect="plain" class="ml10" v-for="w in recruitment.welfare" :key="w" :value="w">{{w}}</el-tag>
        </div>
        <div class="pb20" v-if="recruitment.tags">
          <span class="recruitment-header">职位标签</span>
          <el-tag effect="plain" class="ml10" v-for="t in recruitment.tags" :key="t" :value="t">{{t | tagFilter(tagOperations)}}</el-tag>
        </div>
        <div v-if="recruitment.duty">
          <span class="recruitment-header">职位职责</span>
          <div class="ml10" v-html="recruitment.duty"></div>
        </div>
        <div v-if="recruitment.requirement">
          <span class="recruitment-header">任职要求</span>
          <div class="ml10" v-html="recruitment.requirement"></div>
        </div>
        <div class="pb20">
          <span class="recruitment-header">联系人</span>
          <el-tag effect="plain" class="ml10">{{recruitment.contactName}}</el-tag>
        </div>
        <div class="pb20">
          <span class="recruitment-header">联系电话</span>
          <el-tag effect="plain" class="ml10">{{recruitment.contactPhone}}</el-tag>
        </div>
        <div class="pb20">
          <span class="recruitment-header">联系邮箱</span>
          <el-tag effect="plain" class="ml10">{{recruitment.email}}</el-tag>
        </div>
        <div class="pb20">
          <span class="recruitment-header">更新时间</span>
          <el-tag effect="plain" class="ml10">{{recruitment.releaseTime}}</el-tag>
        </div>
        <div class="pb20">
          <span class="recruitment-header">浏览次数</span>
          <el-tag effect="plain" class="ml10">{{recruitment.frequency}}</el-tag>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  viewRecruitment,
  fetchTagList
} from '@/api/recruitment'
import { educationOperations, experienceOperations, welfareOperations } from '../../utils/constants'
export default {
  name: 'ViewRecruitment',
  filters: {
    tagFilter(value, options) {
      let result
      options.map(res => {
        if (value === res.id) {
          result = res.details
        }
      })
      return result
    }
  },
  data() {
    return {
      recruitment: {
        id: '',
        name: '',
        salaryLower: '',
        salaryUpper: '',
        experience: '',
        education: '',
        duty: '',
        welfare: [],
        requirement: '',
        tags: [],
        contactName: '',
        contactPhone: '',
        email: '',
        releaseTime: '',
        frequency: ''
      },
      experienceOperations: experienceOperations,
      educationOperations: educationOperations,
      welfareOperations: welfareOperations,
      tagOperations: null
    }
  },
  mounted() {
    // 加载tag列表
    fetchTagList().then(
      (response) => {
        this.tagOperations = response.data
      }
    )
    // 加载职位
    this.viewRecruitment()
  },
  methods: {
    viewRecruitment() {
      const param = { recruitmentId: this.$route.query.recruitmentId }
      viewRecruitment(param).then(
        (response) => {
          // console.log(response.data)
          this.recruitment = response.data
          // console.log(this.recruitment)
        }
      )
    },
    returnPost() {
      this.$router.push({ path: '/job/post' })
    },
    update() {
      this.$router.push({ path: '/job/edit', query: { recruitmentId: this.$route.query.recruitmentId }})
    }
  }
}
</script>
<style lang="scss" scoped>
  .my-recruitment {
    padding: 40px;
  }
  .content {
    font-size: 14px;
  }
  .pb20 {
    padding-bottom: 20px;
  }
  .btn-right {
    float: right;
  }
  .ml10 {
    margin-left: 10px;
  }
  .recruitment-header {
    color: #606266;
    font-weight: bold;
    padding-bottom: 10px;
    display: block;
  }

  .user-bio {
    color: #606266;

    span {
      padding-left: 4px;
    }

    .user-bio-section {
      font-size: 14px;
      padding: 15px 0;

      .user-bio-section-header {
        /*border-bottom: 1px solid #dfe6ec;*/
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
</style>
